<template>
    <div class="register-view">
        <template v-if="isComplete">
            <h1 class="title">注册成功</h1>
            <form method="post" onsubmit="return false">
                <p class="tip">请复制以下Token进行登录</p>
                <div class="form-alias">
                    <label>
                        <strong>token</strong>
                        <input v-model="token" type="text" name="token" placeholder="token">
                    </label>
                </div>
                <div class="form-submit">
                    <router-link class="submit" :to="{name: 'LoginView'}" tag="button">
                        去登录
                    </router-link>
                </div>
            </form>
        </template>
        <template v-else>
            <h1 class="title">欢迎加入Vue</h1>
            <form method="post" @submit.prevent="Submit">
                <p v-if="error" class="tip error">{{error}}</p>
                <div class="form-email">
                    <label>
                        <strong>邮箱</strong>
                        <input type="email" name="email" v-model.trim="email" placeholder="邮箱" autocomplete="off" />
                    </label>
                </div>
                <div class="form-pwd">
                    <label for="">
                        <strong>请输入密码</strong>
                        <template v-if="passType === 'password'">
                            <input type="password" name="pass" v-model.trim="pass" placeholder="密码" autocomplete="off" key="user-password"/>
                        </template>
                        <template v-else>
                            <input type="text" name="pass" v-model.trim="pass" placeholder="密码" autocomplete="off"  key="user-password"/>
                        </template>
                        <span class="show-pwd" :class="{show: isShow}" @click="showPwd"></span>
                    </label>
                </div>
                <div class="form-user">
                    <label>
                        <strong>用户名</strong>
                        <input type="text" name="name" v-model.trim="name" placeholder="用户名" autocomplete="off"  key="user-name"/>
                    </label>
                </div>
                <div class="form-submit">
                    <button class="submit" type="submit" :disabled="isDisabled" :class="{disabled: isDisabled}">
                        {{registerState}}
                    </button>
                </div>
            </form>
            <div class="footer">
                <div class="agreement">点击「注册」代表你已阅读并同意用户使用协议</div>
                <div class="btns">
                    <a href="https://cn.vuejs.org/v2/guide/">学习Vue</a>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import util from '../util/util.js'
import userTable from '../api/user'
export default {
    name: 'RegisterView',
    data() {
        return {
            isComplete: false,
            error: false,
            passType: 'password',
            isDisabled: false,
            registerState: '立即注册',
            isShow: false,
            email: '',
            pass: '',
            name: '',
            token: ''
        }
    },
    methods: {
        beforeSubmit: function(){
            this.registerState = '注册中...';
            this.isDisabled = true;
        },
        Submit: function(){
            this.beforeSubmit();
            this.$store.dispatch('register', {
                email: this.email,
                pass: this.pass,
                name: this.name
            }).then((res) => {
                console.log(res);
                this.onSuccess(res);
            }).catch(err => {
                this.onError(err);
                console.log(err);
            })
        },
        onSuccess: function(res){
            sessionStorage.setItem('token', res.token);
            sessionStorage.setItem('email', res.email);
            sessionStorage.setItem('name', res.name);
            util.Cookie.set('VUEID', '12345', {expires: 7});
            userTable.insert('12345', {name: res.name, email: res.email, pass: res.pass, token: res.token});
            this.token = res.token;
            this.isComplete = true;
        },
        onError: function(err){
            console.log(err);
            this.registerState = '立即注册'
            this.isDisabled = false
        },
        showPwd: function(){
            this.isShow = this.isShow ? false : true;
            this.passType = this.isShow ? 'text' : 'password';
        }
    },
    beforeRouteEnter (to, from, next) {
        // next(vm => {
        //     if(localStorage.getItem('email')) {
        //         vm.$router.push({name: 'HomeView'})
        //     } else {
        //         next();
        //     }
        // })   
        next();
    }
}
</script>

<style lang="scss" scoped>
    .register-view {
        h1 {
            margin: 10% 0 9%;
            font-size: 4rem;
            text-align: center;
            font-weight: 300;
            color:#42bd56;
        }
        form {
            padding: 2rem 1.5rem;
            strong {
                font-size: 1.5rem;
                color: #222;
                display: none;
            }
            input {
                display: inline-block;
                width: 100%;
                height: 4.4rem;
                border-radius: 0.3rem;
                border: 0.1rem solid #ccc;
                padding: 0 0.8rem;
                font-size: 1.5rem;
                box-sizing: border-box;
                background: #fff;
                outline: none;
            }
            .form-pwd {
                position: relative;
                .show-pwd {
                    position: absolute;
                    height: 100%;
                    width: 3.2rem;
                    right: 0.2rem;
                    top: 0;
                    background-image: url();
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: 2.2rem;
                    z-index: 3;
                }
                .show-pwd.show {
                    background-image: url();
                }
            }
            .submit {
                cursor: pointer;
                width: 100%;
                padding: 1.2rem 2.6rem;
                margin-top:1rem;
                font-size: 1.7rem;
                text-align: center;
                color:#fff;
                border: 0.1rem solid #17aa52;
                border-radius: 0.3rem;
                background: #42bd56
            }
            .disabled {
                background: #eee;
                cursor: not-allowed;
                border: none;
            }
            .tip {
                font-size: 1.4rem;
                color:#aaa;
            }
            .error {
                color: #ff0000;
            }

        }
        .footer {
            .agreement {
                font-size: 1.4rem;
                color: #aaa;
                text-align: center;
            }
            .btns {
                margin-top: 4rem; 
                text-align: center;
                font-size: 1.5rem;
                a {
                    color: #42bd56; 
                }
            }
        }
    }
</style>


